<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴菜单</title>
	<link rel="stylesheet" href="../css/shoufengqin.css">
</head>
<body>

	<div class="sBody">
		<div class="tetle">
			<p>html教程</p>
			<ul>
				<li>教程1</li>
				<li>教程2</li>
				<li>教程3</li>
				<li>教程4</li>
				<li>教程5</li>
			</ul>
		</div>
		<div class="tetle">
			<p>css教程</p>
			<ul class="vue">
				<li>课程1</li>
				<li>课程2</li>
				<li>课程3</li>
				<li>课程4</li>
				<li>课程5</li>
			</ul>
		</div>
		<div class="tetle">
			<p>jquery课程</p>
			<ul>
				<li>基本用法</li>
				<li>属性方法</li>
				<li>文档处理</li>
				<li>事件方法</li>
				<li>工具方法</li>
			</ul>
		</div>
		<div class="tetle">
			<p>angular课程</p>
			<ul class="angular">
				<li>基本方法</li>
				<li>基本指令</li>
				<li>基本服务</li>
				<li>自定义指令</li>
				<li>自定义服务</li>
			</ul>
		</div>
		<div class="tetle">
			<p>vue教程</p>
			<ul class="vue">
				<li>v-for</li>
				<li>v-show</li>
				<li>v-hide</li>
				<li>v-on</li>
				<li>v-bing</li>
			</ul>
		</div>
		
	</div>


	<script src="../lib/jquery.min.js"></script>
	<script>

		!function(window,document,$,undefined) {

			var tClick = function() {
				var $p = $('.sBody .tetle');

				$p.on('click',function() {
					var $this = $(this);
					
					$this
						.find('p').toggleClass('color')
						.end()
						.find('ul').slideToggle()
						.end()
						.siblings()
						.find('p.color').removeClass('color')  //选择有什么class的时候不能加空格
						.end()
						.find('ul:visible').slideUp();
				})
					
			};


			$(document).ready(tClick);

		}(window,document,jQuery)
		
	</script>
	
</body>
</html>
